<template>
	<view class="">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar" :style="{height:navBarHeight + 'rpx'}">
				<view class="text-xl">{{title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				// navBarHeight: 82 + 11,
				navBarHeight: 76
			}
		},
		props: {
			title: {
				type: String,
				default: '垃圾监控' //如果使用者没有指定propB的值，则propB属性的默认值为 张三
			}
		},
		onLoad() {

		},
		methods: {

		},
		onShow() {

		},
		//第一次加载时调用
		created() {
			/* 
			 页面加载后，计算导航栏高度。
			 得到状态栏高度后，将状态栏高度赋值给状态栏占位元素。这样就空出了状态栏。注意状态栏的单位为px，其它地方使用的单位为rpx。
			 导航栏中放置一个image元素，用于展示LOGO。再放一个view元素，用于展示标题。
			 运行到小程序模拟器，得到前面想要的效果。
			 */

			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onReady() {
			//新的标题
			// uni.setNavigationBarTitle({
			// 	title: '垃圾监控设备'
			// });
			// //标题蓝颜色
			// uni.setNavigationBarColor({
			// 	frontColor: '#000000',
			// 	backgroundColor: '#8ebbfd'
			// });
		},
	}
</script>

<style lang="scss" scoped>
	.index {}
</style>
<style>
	.navBarBox {
		background-image: url(/static/img/bg/bg1.png);
	}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.navBarBox .navBar .logo {
		width: 82rpx;
		height: 82rpx;
		margin-right: 10rpx;
	}
</style>